<!-- eslint-disable @typescript-eslint/no-explicit-any -->
<template>
  <div class="container">
    <div>{{ props.label }}</div>
    <div class="buttonEdit" :class="{ active: isActive, disabled: isDisabled }">
      <!--输入框-->
      <input class="buttonEdit_input" :class="{ disabled: isDisabled }" ref="myInput" v-model="inputValue" type="text"
        :disabled="isDisabled" :placeholder="placeholder" @focus="showClearButton" @input="showClearButton"
        @blur="hideClearButton">
      <!--删除按钮-->
      <img class="buttonEdit_button_img" @mousedown="buttonEditCallback" src="../assets/threePointEllipsis.png" />
      <img class="buttonEdit_button_img" @mousedown="clearCallback" v-if="isShowClearButton" src="../assets/x.png" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, withDefaults, defineProps,watch } from "vue";
const props = withDefaults(defineProps<{
  clearButton?: boolean,
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  buttonClick?: any,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
  cleanClick?: any,
  disabled?: boolean,
  placeholder?: string,
  label?: string,
  value?: string
}
>(), {
  clearButton: false,
  disabled: false,
  placeholder: "",
  label: "",
  value: ""
})
let isShowClearButton = ref(false);
let inputValue = ref(props.value);
let isActive = ref(false);
let isDisabled = ref(props.disabled);
const myInput = ref();
console.log(props)
watch(() => props.value, () => {
  inputValue.value = props.value;
})
function showClearButton(e: Event) {
  if (isDisabled.value) {
    e.preventDefault();
    return
  }
  if (props.clearButton) {
    isShowClearButton.value = !!inputValue.value;
  }
  isActive.value = true;
}
function hideClearButton(e: Event) {
  if (isDisabled.value) {
    e.preventDefault();
    return
  }
  if (props.clearButton) {
    isShowClearButton.value = false;
  }
  isActive.value = false;
}
function clearCallback(e: Event) {
  console.log(props.value)
  if (isDisabled.value) {
    e.preventDefault();
    return
  }
  myInput.value.focus();
  if (props.cleanClick) {
    props.cleanClick(e)
    inputValue.value = props.value;
    return
  }
  inputValue.value = "";
}
function buttonEditCallback(e: Event) {
  e.preventDefault();
  myInput.value.focus();
  props.buttonClick(e)
}
</script>

<style scoped>
.container {
  display: flex;
  /* justify-content: center; */
  align-items: center;
  margin: 0 0 0 5px;
}

.buttonEdit {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 40px;
  border: 1px #6a6b6f solid;
  margin: 5px;
  border-radius: 4px;
}

/*设置输入框的默认样式*/
.buttonEdit_input {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border: none;
  font-size: large;
  outline: none;
  border-radius: 4px;
}

/*设置输入框选中时的样式*/
.active {
  border: 1px #59a4ff solid;
  outline: none;
}

/* 禁用时的样式 */
.disabled {
  cursor: not-allowed !important;
  background-color: #ccc;
  opacity: 0.5;
  border-radius: 4px;
  /* 阻止鼠标事件 */
}

.buttonEdit_button_img {
  height: 24px;
  padding: 2px;
}
</style>